<template id="ec-chat">
  <div class="ec-chat">
    <div class="ec-chat-top">
      <div class="ec-chat-top1">
        <div class="ec-chat-top2">
          <div class="ec-chat-top3">
            <!--<div class="chatBack"><router-link to='/common/ecFriend'><img src="../../../static/images/eng-corner/arrowBack1.png" alt=""/></router-link></div>-->
            <!--<div class="chatTitle">Chat</div>-->
            <div class="addMore">+
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ec-chat-con">
      <div class="ec-chat-conText" v-html="htmlTxt">
      </div>
    </div>
    <div class="ec-chat-key">
      <div class="ec-chat-input">
        <input type="text" class="ec-chat-input" placeholder="Write Message" @change="getSendMsg"/>
      </div>
      <div class="ec-chat-btn" @click="beginChat"></div>
    </div>
  </div>
</template>
<script>
  export default{
    name:'ec-chat',
    data:function(){
      return {
        chatcon:[
          {
            'chat-txt':'hello world'
          }
        ],
        userInfo:{
          username:'',
          imgSrc:'',
          message:''

        },
        sendMsg:'',
        htmlTxt:''
      }
    },
    mounted:function(){
      var that=this;
      dMessage = this.sendMsg;
      var tempMsg={};
      that.userInfo.username=this.$route.query.username;
      that.userInfo.imgSrc=this.$route.query.imgSrc;
//      socket = new WebSocket('ws://192.168.0.101:3333/'); //WebSocket协议的URL使用ws://开头
      // 打开Socket
//      socket.onopen = function(event) {
//        console.log("socket 已经打开");
//        // 监听消息
//        socket.onmessage = function(event) {
//          var jsonobj = JSON.parse(event.data);
//          var username=jsonobj.name;
//          var changeHtml="";
//          if(username=='Spring'){
//            changeHtml=
//              "<div class='ec-user-img'>" +
//              "<img src='"+jsonobj.imgSrc+"'/></div>"+
//              "<div class='chat-box-l'>"+jsonobj.message+
//              " <div class='chat-box-l-name'>"+jsonobj.name+"</div>"+
//              " </div>";
//          }else{
//            changeHtml=
//              "<div class='chat-box-l'>"+jsonobj.message+
//              " <div class='chat-box-l-name'>"+jsonobj.name+"</div>"+
//              " </div>"+ "<div class='ec-user-img'>" +
//              "<img src='"+jsonobj.imgSrc+"'/></div>";
//          }
//          that.htmlTxt= that.htmlTxt+"<div class='ec-chat-l'>" +
//            changeHtml+
//            "</div>";
//        };
//
//        //监听Socket的关闭
////          socket.onclose = function(event) {
////            console.log('Client notified socket has closed',event);
////          };
//
//        //关闭Socket....
////          socket.close()
//      };
    },
    methods:{
      beginChat:function() {
        var that=this;
        var username=that.userInfo.username;
        var imgSrc=that.userInfo.imgSrc;
        var jsonobj = {name:username,message:that.sendMsg,imgSrc:imgSrc,online:""};
        socket.send(JSON.stringify(jsonobj)); //发送信息到服务器
      },
      getSendMsg:function(){
        var that=this;
        that.sendMsg=event.target.value;
        event.target.value='';
      }
    }
  }
</script>
<style>
  #ec-chat{
    position: relative;
  }
  .ec-chat-top{
    margin-top: -100px;
  }
  .ec-chat-top1{
    background: #F2A28B;
    padding:38px 0;
    border-radius: 0 0 40% 40%;
  }
  .ec-chat-top2{
    background: #EF7856;
    padding:47px 0;
    border-radius: 0 0 40% 40%;
  }
  .ec-chat-top3{
    background: #ED6942;
    padding:20px 30px;
    text-align: center;
    color: #fff;
    font-size:14px;
    border-radius: 0 0 80% 80%;
    display: flex;
    position: relative;
  }
  .chatBack{
    position: absolute;
    top: 30px;
    left: 31px;
    animation: arrowBackMove linear 1s ;
  }
  .chatBack img{
    width:50px;
  }
  .chatTitle{
    font-size:16px;
    margin:  0 auto;
    align-self: center;
  }
  .addMore{
    position: absolute;
    left: 40px;
    bottom: -100px;
    background: #ffffff;
    color:#ED6942;
    width:50px;
    height: 50px;
    font-size:16px;
    line-height:50px;
    text-align: center;
    border-radius: 100%;
    border: 1px solid #ddd;
    box-shadow: 5px 5px 7px #aaa;
  }
  .ec-chat-con{
    padding: 100px 0;
  }
  .ec-chat-conText{
    width: 98%;
    margin: 0 auto;
  }
  .ec-chat-conText>div{
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  .ec-chat-key{
    width:100%;
    display: flex;
    position: fixed;
    bottom: 47px;
    padding: 10px 0;
    justify-content: space-between;
    align-items: center;
  }
  .ec-chat-con{
    background: #FCFCFC;
  }
  .ec-chat-input{
    width: 90%;
  }
  .ec-chat-input input{
    width: 83%;
    display: inline-block;
    border: none;
    outline: none;
    font-size: 14px;
    border: 1px solid #777777;
    border-radius: 16px;
    padding:12px 20px;
  }
  .ec-chat-input input::-webkit-input-placeholder{
    color:#3C3C3C;
    font-size: 14px;
  }
  .ec-chat-btn{
    width: 40px;
    height: 39px;
    text-align: center;
    line-height:39px;
    background: url("../../../static/images/eng-corner/chat3.png") center center;
    background-size:cover;
    margin-right: 10px;
  }
  .ec-user-img{
    margin-top:70px;
  }
  .ec-user-img img{
    width: 120px;
    height:120px;
  }
  .chat-box-l{
    width: 70%;
    padding: 50px 20px;
    margin: 50px 8%;
    height: 50px;
    border: 1px solid #ddd;
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 10px 10px 10px #ddd;
    color: #8B8B8B;
    font-size: 30px;
  }
  .chat-box-l-name{
    align-self: flex-end;
    text-align: left;
    color:#8B8B8B;
    opacity: .6;
    font-size: 10px;
    margin: 10px 0;
  }
  @keyframes arrowBackMove {
    0%{
      transform: translateX(-100px);
    }
    25%{
      transform: translateX(60px);
    }
    50%{
      transform: translateX(40px);
    }
    75%{
      transform: translateX(20px);
    }
    100%{
      transform: translateX(0px);
    }
  }
  @media (max-width: 320px){
    .ec-chat-top1 {
      padding: 33px 0;
    }
    .ec-chat-top2 {
      padding: 32px 0;
    }
    .addMore{
      width: 40px;
      height: 40px;
      line-height: 40px;
      bottom:-80px;
    }
    .ec-chat-input input{
      width:81%;
      padding: 5px 20px;
    }
    .ec-chat-btn {
      width: 35px;
      height: 34px;
      text-align: center;
      line-height: 34px;
    }
    .ec-chat-key{
      padding:0;
    }
  }
</style>
